<template>
  <div class="go-editReport">
    <div class="element" >
      
          

       <n-spin :show="!Refresh">
              <KeepAlive>
             <template v-for="(targetData,index) in tabsBottomList" :key="index">
        <div v-if="targetData.id==currentDataId">
           <Data v-if="targetData.type==TabsBottomType.DATA" 
      :targetData="targetData"></Data>
    <ComponentData v-if="targetData.type==TabsBottomType.COMPONENT" 
    :targetData="targetData"></ComponentData>
    
      <Instrument v-if="targetData.type==TabsBottomType.INSTRUMENT"
       :targetData="targetData"></Instrument>
  
        </div>

      </template>
      </KeepAlive>

  </n-spin>
 
     
    </div>
    <TabsBottom
      v-model="currentDataId"
      :tabsBottomList="tabsBottomList"
      @update:modelValue="handleChange"
      @add="handleAddModel"
      @delete="handleDeleteModel"
    ></TabsBottom>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, } from 'vue'
import { TabsBottomType, TabsBottomTypeName } from '@/enums/editReportEnum'
import { getUUID, loadingFinish, loadingStart } from '@/utils'
//底部标签
import TabsBottom from './components/tabsBottom/index.vue'
//组件
import ComponentData from './components/component/index.vue'
//数据
import Data from './components/data/index.vue'
//仪表盘
import Instrument from './components/Instrument/index.vue'
import {
  useReportStore
} from '../store/useReportStore';
const reportStore = useReportStore()
const tabsBottomList:any = computed(()=>{
  const biReportData = reportStore.getbiReportData
  return biReportData
})

const targetData = ref(tabsBottomList.value[0])
reportStore.setTargetId(targetData.value.id)
const Refresh = ref(true)
const handleChange = (id:string,data:any)=>{
  Refresh.value = false
  setTimeout(() => {
    Refresh.value = true
  }, 500);
  targetData.value = data;
  reportStore.setTargetId(id)
}
//当前激活对象
const currentDataId = ref(targetData.value.id)
const handleAddModel = (key: string) => {
  const { value: data } = tabsBottomList
  if (key == TabsBottomType.COMPONENT) {
    data.push({
      type: TabsBottomType.COMPONENT,
      data: {
        options:{

        },
        styles:  {
  x:0,
  y:0,
  w:480,
  h:300,
  initW:480,
  initH:300,
}
      },
      name: TabsBottomTypeName.COMPONENT,
      close: true, //true 可以删除 false 不可以删除
      id: getUUID()
    })
  } else if (key == TabsBottomType.INSTRUMENT) {
    data.push({
      type: TabsBottomType.INSTRUMENT,
      data: {
        data:[]
      },
      name: TabsBottomTypeName.INSTRUMENT,
      close: true, //true 可以删除 false 不可以删除
      id: getUUID()
    })
  }
  console.log('data :>> ', data);
}
//删除 模块
const handleDeleteModel = (item: any) => {
  tabsBottomList.value.findIndex((res: any) => {})
}
</script>

<style lang="scss" scoped>
.element{
  height: 100%;
}
@include go(editReport) {
  height: 100vh;
  display: grid;
   
  grid-template-rows: 1fr 40px;
}
</style>
